<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">MyCat全景图</h1>
	</div>
</div>
<!--/.row-->
<div class="row">
	<div class="col-lg-12">
		<div id="topoRegion">
		</div>
	</div>
</div>
<script type="text/javascript">
	
	
jsPlumb.bind("ready", function() {
	
	// 异步,从后台获取拓扑元数据
	$.get('gettopo', function(resp) {
		if(resp.success) {
			jsPlumb.setContainer($('#topoRegion'));
			// 清除之前绘制的内容
			$('#topoRegion').children().remove();
			var topoData = resp.row;
			var rootPosition = [0, 0];
			var nodeTypeArray = ['ROOT', 'MYCAT_SERVER', 'HA_GROUP', 'MYSQL'];
			// 绘制拓扑图
			drawTopo(topoData, rootPosition, nodeTypeArray);
		}
	});
	

	
});
	
</script>
